<template>
  <div>
    <el-row style="text-align:right;padding:0px 10px">
      <!-- 2.8 下载模板 按系统字段下载excel -->
      <el-button size="small" @click="onDownLoad" icon="el-icon-download">
        下载模板
      </el-button>
      <!-- 2.1选择文件 Excel文件 xlsx -->
      <el-button size="small" @click="onSelectExcel" icon="el-icon-upload2">
        选择Excel文件
      </el-button>
    </el-row>
    <mei-layout style="height:80vh">
      <mei-layout-left title="导入配置" width="600px">
        <sysAssetA1List
          :excelCol="excelCol"
          @onColChange="onColChange"
        ></sysAssetA1List>
      </mei-layout-left>
      <mei-layout-main title="数据预览" overflow>
        <excelData :excelData="excelData" :excelCol="newexcelCol"></excelData>
      </mei-layout-main>
    </mei-layout>
    <mei-ExcelHelp ref="excelHelp" @readExcel="onReadExcel"></mei-ExcelHelp>
  </div>
</template>
<script>
import sysAssetA1List from "./sysAssetA1List";
import excelData from "./excelData";
import { AssetA1 } from "@/api";
export default {
  name: "assetA1Excel",
  data() {
    return {
      //excel列
      excelCol: [],
      //匹配后的列 对照
      newexcelCol: {},
      //excel 的数据
      excelData: []
    };
  },
  inject: ["A1List"],
  //外部属性
  props: {},
  //内部方法
  methods: {
    async initPage() {},
    //选择Excel
    onSelectExcel() {
      this.$refs.excelHelp.select();
    },
    //文件改变 返回数据
    onReadExcel(data, cols) {
      //[{clo:val}]
      //data 处理数据
      this.excelCol = cols;
      this.excelData = data;
    },
    onDownLoad() {
      //后台资产数据列
      const data = [...this.A1List.data.sysAssetA1Data];
      this.$refs.excelHelp.downLoad(
        data.map(item => item.SYS_ASSET_A1_50), //列的名字
        "资产导入模板"
      );
    },
    onColChange(newexcelCol) {
      this.newexcelCol = { ...newexcelCol };
    }
  },
  //组件
  components: {
    sysAssetA1List,
    excelData
  },
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
